<template>
	<view>
		<!-- 基础卡片 -->
		<view class="listcard">
			<view class="listcard-image">
				<!-- //aspectFill表示完全填充图片 -->
				<image src="../../static/logo.png" mode="aspectFill"></image>
			</view>
			<!-- //增加平级信息 -->
			<view class="listcard-content">
				<view class="listcard-content-title">
					<text>{{article.content}}</text>
				</view>
				<view class="listcard-content-des">
					<view class="listcard-content-desc-label">
						<view class="listcard-content-desc-label-item">
							{{article.type}}
						</view>
					</view>
					<view class="listcard-content-desc-browe">
						{{article.show_num}}人浏览
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			article:{
				type:Object,
				default (){
					return {}
				}
			}
		},
		name: "list-card",
		data() {
			return {

			};
		},
	}
	
</script>

<style lang="scss">
.listcard{
	display: flex;
	//上下左右的距离都是10
	//padding是内边距
	padding: 10px;
	//margin是外边距
	margin: 10px;
	border-radius: 5px;
	// border: 2px #999 solid;
	//下面这个纯粹就是给的一个阴影效果
	box-shadow: 0 0 5px 1px rgba($color: #0000, $alpha:0.1);
	box-sizing: border-box;
	.listcard-image{
		//不让图片压缩.不仅仅是图片，还有就是课程里面的，三个图标
		// 被挤压在一起,没有正常的排序,也可以使用这个方法进行控制
		flex-shrink: 0;
		//这是是限制整体的大小是多少的
		width: 60px;
		height: 60px;
		border-radius: 5px;
		//然后就是溢出，就是超过上面限制的大小的就直接隐藏掉
		overflow: hidden;
		//然后为了显示的完全的图片，给图片设置大小。因为image是在.listcard-image下面，所以要符合它
		image{
			//一般只要上面限制了图片的大小，然后隐藏溢出的，都要单独设置，让图片满
			width: 100%;
			height: 100%;
		}
	}
	.listcard-content{
		display: flex;
		flex-direction: column;
		//这个是上下两边靠。其它他就是纯粹的两边靠，如果是水平的就水平两边靠，如果是垂直的就是
		// 垂直两边靠.如果不想抵着最下面,那就给下面加padding
		justify-content: space-between;
		padding-left: 10px;
		width: 100%;
		.listcard-content-title{
			font-size: 14px;
			color: #f653d8;
			font-weight: bold;
			line-height: 1.2;
			//标签名字，调整样式是不需要加点号的
			text{
				//以下所有的作用都是让文字过多，超过两行的时候，隐藏信息显示
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
		.listcard-content-des{
			//在这个位置，我深刻体会到这个用处是什么了，原来每一行view作为一个单独的模块
			// 一行就是一行,在这里,只要view里面还有view,那么就去除种种格式了，默认在一行
			// 至于说后续怎么排序,可以自由设置
			display: flex;
			//在左右两边对其
			justify-content: space-between;
			font-size: 12px;
			.listcard-content-desc-label{
				color: firebrick;
				display: flex;
				.listcard-content-desc-label-item{
					padding: 0 5px;
					//不仅仅是有margin-right还有margin-top，left,bottom等等
					margin-right: 5px;
					//margin-right还有一个用法，在一行有多个txt，view等元素的信息
					// 都挤在一起,需要一定的距离间距时,可以用这个起到控制的作用.
					border-radius: 5px;
					border: 1px #d52e00 solid;
				}
			}
			.listcard-content-desc-browe{
				//999是比较暗的色系
				color: #999;
				line-height: 1.5;
			}
		}
	}
}
</style>